<template>
	<view class="container">
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item,index) in addresslist" :key="index">
				<view @click="chooseaddress(index)" class="card">
					<view class="location">{{item.location+item.detail}}</view>
					<view class="xinxi">
						<view class="name">{{item.name}}</view>
						<view class="phone">{{item.phone}}</view>
						<uni-tag circle type="error" size="small" v-if="item.isdefault===1" text="默认"></uni-tag>
					</view>
					<view class="moren">
						<view @click.stop="changedefault(index)" :class="['cicle',item.isdefault===1?'active':'']"></view>
						<view>设置为默认地址</view>
					</view>
					<view @click.stop="goedit(index)" style="position: absolute;right: 10rpx;top:50%;transform: translateY(-50%);">
						<image style="width: 50rpx;height: 50rpx;" src="../../static/feed/edit.png"></image>
					</view>
				</view>
				<template v-slot:right>
					<view @click="deleteaddress(index)" style="background-color: #F56C6C;color: #fff;width: 150rpx;display: flex;align-items: center;justify-content: center;">
						 删除
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="bottom">
			<view @click="goadd()" class="button">添加地址</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import {onShow,onUnload} from "@dcloudio/uni-app"
	import http from "@/utils/request.js"
	onShow(()=>{
		if(!uni.getStorageSync('addresslist')){
			getaddress()
		}else{
			addresslist.value=uni.getStorageSync('addresslist')
		}
	})
	onUnload(()=>{
		uni.setStorageSync('addresslist',addresslist.value)
		if(changeindex.value!==-1){
			morenchange()
		}
	})
	
	let addresslist=ref([])
	let changeindex=ref(-1)

	function morenchange(){
		if(changeindex.value===-2){
			let response=http.post('/address/setdefault',{})
			response.then(res=>{
				
			})
		}else{
			let response=http.post('/address/setdefault',{
				address_id:addresslist.value[changeindex.value].address_id
			})
			response.then(res=>{
				
			})
		}
	}
	function goedit(index){
		uni.navigateTo({
			url:'/pages/address/edit?index='+index
		})
	}
	function changedefault(index){
		if(addresslist.value[index].isdefault===0){
			addresslist.value.forEach((item)=>{
				item.isdefault=0
			})
			addresslist.value[index].isdefault=1
			changeindex.value=index
		}
		else{
			addresslist.value[index].isdefault=0
			changeindex.value=-2
		}
	}
	function getaddress(){
		let response=http.get('/address/getaddress',{address_order:uni.getStorageSync('userinfo').user_id})
		response.then(res=>{
			if(res.data.code===200){
				addresslist.value=res.data.data
				uni.setStorageSync('addresslist',res.data.data)
			}
		})
	}
	function goadd(){
		uni.navigateTo({
			url:'/pages/address/add'
		})
	}
	function chooseaddress(index){
		uni.$emit('receiveaddress',addresslist.value[index])
		uni.navigateBack()
	}
	function deleteaddress(index){
		if(addresslist.value[index].isdefault===1)return uni.showToast({
			title:'默认地址无法删除',
			icon:'none'
		})
		let response=http.post('/address/deleteaddress',{address_id:addresslist.value[index].address_id})
		response.then(res=>{
			if(res.data.code===200){
				addresslist.value.splice(index,1)
				uni.showToast({
					title:'删除成功'
				})
				uni.setStorageSync('addresslist',addresslist.value)
			}
		})
	}
	
</script>

<style lang="scss">
	.container{
		width: 100%;
		box-sizing: border-box;
	}
	.card{
		width: 100%;
		background-color: #fff;
		position: relative;
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		border-bottom: 2rpx solid #ececec;
		
		.location{
			width: 100%;
			font-size: 28rpx;
			color: #666;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 10rpx;
		}
		
		.xinxi{
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			margin-bottom: 10rpx;
			
			.name{
				max-width: 60%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-right: 10rpx;
			}
			
			.phone{
				max-width: 20%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-right: 10rpx;
			}
			
		}
		
		.moren{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color:#666;
			
			.cicle{
				height: 40rpx;
				width: 40rpx;
				border-radius: 50%;
				border: 1rpx solid #666;
				margin-right: 10rpx;
				
				&.active{
					background-color: #f8e177;
				}
			}
		}
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.button{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #090300;
			letter-spacing: 0.2em;
			width: 90%;
			height: 70%;
			border-radius: 50rpx;
			
			&:active{
				opacity: 0.7;
			}
		}
	}
</style>
